/*
 * @Description: 查询中
 * @Author: ziwei.ma
 * @Date: 2019-10-31 14:13:36
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 21:39:31
 */

<template>
  <div class="result_wrapper flex-v flex-vc">
    <img :src="img">
    <div class="flex-v flex-vc">
      <div class="fontsize48 baseColorNoAcitve">{{failsMsg}}</div>
    </div>
    <div class="btn_wrapper flex-v flex-hv">
      <div
        class="FristBtn fontsize32"
        @click="payAgain"
      >重新支付</div>
      <div
        class="SecondBtn fontsize32"
        @click="inquireAgain"
      >继续查询</div>
      <div
        class="baseColorNoAcitve fontsize32"
        @click="goToHome"
      >返回首页</div>
    </div>
  </div>
</template>

<script>
import { payOrder } from '../../api/api'
export default {
  components: {

  },
  props: {
    failsMsg: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      img: require('@wechat/img/query.png')
    }
  },
  methods: {
    goToHome() { // 返回首页、完成
      this.$router.push({ name: 'buyIndex' })
    },
    payAgain() { // 再次支付
      this.failsMsg = '支付结果查询中...'
      payOrder(this.orderNO).then(res => {
        console.warn('res===>', res)
        let obj = this.$getUrlParams('?' + res.PAYMENT_STR) // 解析支付串
        console.log(obj)
        // 拉起微信支付
        this.$WX.then(WX => {
          WX.chooseWXPay(obj.timeStamp, obj.nonceStr, obj.package, obj.signType, obj.paySign, () => {
            this.$router.push({ name: 'paymentResult', query: { ORDER_NO: res.ORDER_NO } })
          }, err => {
            console.dir(err)
            this.$toastMsg('支付失败')
          }, () => {
          })
        }).catch(err => {
          console.dir(err)
          console.log('调用支付接口失败')
        })
      })
    },
    inquireAgain() { // 再次查询
      this.$parent.getResult()
    }
  }
}
</script>

<style scoped>
.result_wrapper {
  height: 100%;
  width: 100%;
}
.result_wrapper > img {
  width: 200px;
  height: 200px;
  margin: 64px;
}
.result_wrapper > div > span {
  color: #666666;
  margin: 16px 80px 0;
  text-align: center;
}
.btn_wrapper {
  line-height: 72px;
  text-align: center;
  position: absolute;
  bottom: 58px;
}
.FristBtn {
  width: 686px;
  height: 72px;
  background: #027aff;
  border-radius: 36px;
  color: #ffffff;
}
.SecondBtn {
  margin: 32px 0 50px;
  width: 686px;
  height: 72px;
  border-radius: 36px;
  border: 1px solid #027aff; /*no*/
  color: #027aff;
}
</style>
